<template>
  <div >

       <el-row style="display: flex; flex-direction: row;flex-wrap: wrap; width: 100%; ">
        <el-col :span="12" style="display: flex; flex-direction: row; min-width: 520px; ">
        <div style="line-height: 40px;padding-left: 20px;padding-top: 5px;margin-left: 20px;padding-right: 20px;display: 
        flex;flex-direction: row;background-color: #f8f8f9 !important;justify-content: center; align-items: center;">
          <span class="ywyj_tongji_title_item" v-if="scene!='zhijian'" >
            衣服：
          <span class="ywyj_tongji_title_item_data">{{tongji.clothesNum}}</span>件</span> 
          <span class="ywyj_tongji_title_item" v-if="scene!='zhijian'">
            鞋子：<span class="ywyj_tongji_title_item_data">{{tongji.shoesNum}}</span> 双</span>
            <span class="ywyj_tongji_title_item" v-if="scene!='zhijian'">配饰：<span class="ywyj_tongji_title_item_data">{{tongji.accessorNum}}</span>件</span>
            <span class="ywyj_tongji_title_item" v-if="scene!='zhijian'" >其他：<span class="ywyj_tongji_title_item_data">{{tongji.otherNum}}</span>件</span>
            <span class="ywyj_tongji_title_item">库位号：<span class="ywyj_tongji_title_item_data">{{tongji.code}}</span></span>
            </div>
            <div   v-if="scene=='zhijian'" style="line-height: 20px;height: 50px ;text-align: center; display: flex; align-items: center; margin-left: 30px;">
             <svg t="1757585796242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15439" width="25" height="25"><path d="M512 56.888889C261.688889 56.888889 56.888889 261.688889 56.888889 512s204.8 455.111111 455.111111 455.111111 455.111111-204.8 455.111111-455.111111-204.8-455.111111-455.111111-455.111111m0 853.333333c-221.866667 0-398.222222-176.355556-398.222222-398.222222s176.355556-398.222222 398.222222-398.222222 398.222222 176.355556 398.222222 398.222222-176.355556 398.222222-398.222222 398.222222" fill="#5acf83" p-id="15440"></path><path d="M512 682.666667c-17.066667 0-28.444444 5.688889-39.822222 17.066666-11.377778 11.377778-17.066667 22.755556-17.066667 39.822223 0 17.066667 5.688889 28.444444 17.066667 39.822222 11.377778 11.377778 22.755556 17.066667 39.822222 17.066666 17.066667 0 28.444444-5.688889 39.822222-17.066666 11.377778-11.377778 17.066667-22.755556 17.066667-39.822222 0-17.066667-5.688889-28.444444-17.066667-39.822223-11.377778-11.377778-22.755556-17.066667-39.822222-17.066666z m-51.2-455.111111l17.066667 409.6h62.577777L563.2 227.555556H460.8z" fill="#5acf83" p-id="15441"></path></svg>
             <span>物品需要打印质检码才可认为成功，配饰扫描水洗码后，即默认质检成功。</span>
            </div>
      
        </el-col>
        <el-col :span="12" style="display: flex; flex-direction: row;padding-top: 10px; justify-items: center;align-items: center;"v-if="scene=='ywyj'" > 
            <el-col :span="23" style="margin-left: 20px; width: 100%;">
            <el-button  icon="el-icon-plus" @click="addGoods" v-if="(orderStatus == 2 || orderStatus == 1)" size="mini">添加商品</el-button>
            <el-button  icon="el-icon-plus" @click="scanPhoto" v-if="(orderStatus == 2 || orderStatus == 1)" size="mini">扫码拍照</el-button>
            <el-button  icon="el-icon-plus" @click="printAllWashCode" size="mini">打印全部水洗码</el-button>
            <el-button  icon="el-icon-plus" @click="printAllPeiShiWashCode" size="mini">打印全部配饰水洗码</el-button>
           </el-col>  
         
        </el-col>
    </el-row>

 <el-row style="margin-top: 10px; margin-left: 20px; ">
    <!-- <el-col :span="24"> -->
    <el-table
    :data="tableData"
    style="width: 100%"
    :border="true"
    :row-class-name="tableRowClassName" 
    @cell-click="handleRowClick"
    @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" width="55" v-if="multiple"></el-table-column>
    <el-table-column
     style="text-align: center;"
      prop="itemType"
      label="物品类型"
      >

       <template slot-scope="scope">
        {{scope.row.itemType? scope.row.itemType:'请选择物品类型'}}
       </template>
    </el-table-column>
    <el-table-column
      prop="washCode"
      label="水洗码"
      >
      <template slot-scope="scope">
      <div class="tag-container1">
          <div class="tipImage" v-if="scene=='zhijian'">
            <svg v-if="scope.row.qualityInspectorStatus==1" t="1757994594012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8339" width="25" height="25"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m223.817143 303.542857L425.837714 613.449143 271.140571 458.825143 219.428571 510.537143l206.409143 206.409143 361.691429-361.691429-51.712-51.712z" fill="#0FAE56" p-id="8340"></path></svg>
            <svg v-if="scope.row.qualityInspectorStatus==0" t="1757993940277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6462" width="25" height="25"><path d="M510.683429 41.837714a470.162286 470.162286 0 1 0 0 940.373334 470.162286 470.162286 0 0 0 0-940.373334z m-39.204572 235.032381a39.15581 39.15581 0 1 1 78.360381 0v278.674286a39.15581 39.15581 0 1 1-78.360381 0V276.918857z m39.204572 470.211048a55.100952 55.100952 0 1 1 0-110.201905 55.100952 55.100952 0 0 1 0 110.201905z" fill="#FD3D30" p-id="6463"></path></svg>
          </div>
         <el-tag>
            {{scope.row.washCode}}
         </el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="图片"
      >
        <template slot-scope="scope">
           <div class="image-box">
                      <div
                        class="image-item"
                        v-for="(item, index) in scope.row.picture">
                        <el-image
                          style="width: 50px; height: 50px; margin-right: 5px"
                          :src="item.url"
                          :preview-src-list="
                            scope.row.picture.map((item) => item.url)
                          "
                        >
                        </el-image>
                      </div>
                    </div>
           <el-button @click="clickRollBack(scope.row)"  v-if="scene=='ywyj' && (orderStatus == 2 || orderStatus == 1)">拍照</el-button>  
        </template>
    </el-table-column>
     <el-table-column
      prop="peishi"
      label="配饰" 
      >
      <template slot-scope="scope">
        <div class="tag-container" v-for="item in scope.row.accessorVoList" :key="item.id">
          <div class="tipImage" v-if="scene=='zhijian'">
            <svg v-if="item.status==1" t="1757994594012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8339" width="25" height="25"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m223.817143 303.542857L425.837714 613.449143 271.140571 458.825143 219.428571 510.537143l206.409143 206.409143 361.691429-361.691429-51.712-51.712z" fill="#0FAE56" p-id="8340"></path></svg>
            <svg v-if="item.status==0" t="1757993940277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6462" width="25" height="25"><path d="M510.683429 41.837714a470.162286 470.162286 0 1 0 0 940.373334 470.162286 470.162286 0 0 0 0-940.373334z m-39.204572 235.032381a39.15581 39.15581 0 1 1 78.360381 0v278.674286a39.15581 39.15581 0 1 1-78.360381 0V276.918857z m39.204572 470.211048a55.100952 55.100952 0 1 1 0-110.201905 55.100952 55.100952 0 0 1 0 110.201905z" fill="#FD3D30" p-id="6463"></path></svg>
          </div>
         <el-tag >
          <div class="vertical-content">
               {{item.type}}<br >
             {{item.washCode}}
         </div>
         </el-tag>
        </div>
        <el-button  icon="el-icon-plus" v-if="scene=='ywyj' && (orderStatus == 2 || orderStatus == 1)">添加配饰</el-button>
      </template>
    </el-table-column>

     <el-table-column
      prop="status"
      label="状态"
      >
      <template slot-scope="scope">
        <div v-if="scope.row.status==0">待清洗</div>
          <div v-if="scope.row.status==1">清洗中</div>
            <div v-if="scope.row.status==2">清洗完成</div>
      </template>
      </el-table-column>

    <el-table-column
      prop="apeishi"
      label="备注"
      >
     
      <template slot-scope="scope">
         <el-tag v-for="item in scope.row.remarks" :key="item" style="margin-left: 5px;">{{item}}</el-tag>
        <el-button  icon="el-icon-plus"  v-if="scene=='ywyj' && (orderStatus == 2 || orderStatus == 1)" >添加备注</el-button>
     </template>
    </el-table-column>

         <el-table-column
          prop="apeishi"
          label="操作" 
      >
      <template slot-scope="scope">
        <div style="display: flex;flex-direction: column;"> 
        <div class="defaultbgColor" @click.stop="printWashCodeForTongji(scope.row)"  v-if="scene!='zhijian'" >打印水洗码</div>
        <div class="defaultbgColor" v-if="scene!='zhijian' && scope.row.accessorVoList" @click.stop="printWashCodeForPeiShi(scope.row)" >打印配饰水洗码</div>
        <div class="defaultbgColor" @click.stop="deleteGoodsFn(scope.row)" v-if="scene=='ywyj' && (orderStatus == 2 || orderStatus == 1)">删除商品</div>
        <div class="defaultbgColor" v-if="scene=='zhijian'" @click="printZjCode(scope.row)">打印质检码</div>
      </div>   
      </template>
    </el-table-column>
   
</el-table>


    <!-- </el-col> -->
      <PrintWashCode
        v-if="scene=='ywyj' || scene == 'detail'"
        ref="printWashCodeBtn"
        :customerDetail="customerDetail"
        :multipleSelection="multipleSelection"
        :phone="detail.customPhone"
      />

        <PrintWashCodeTree
        v-if="scene=='zhijian'"
        ref="PrintWashCodeTreeBtn"
        :customerDetail="customerDetail"
        :multipleSelection="multipleSelection"
        :phone="detail.customPhone"
      />


      <el-dialog
          title="删除警告"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>您确定要删除这个物品吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteGoods()" :loading="loading">确 定</el-button>
          </span>
</el-dialog>

</el-row>


  </div>
</template>

<script>
import { getWashCode , removeShoe , orderStatis} from '@/api/order'
import PrintWashCode from "@/components/PrintWashCode/PrintWashCode.vue";
import PrintWashCodeTree from "@/components/PrintWashCodeTree/PrintWashCodeTree.vue"; //打印质检码
export default {
    props:{
       orderNo:String,
       multiple:Boolean,
       scanPhoto:Function,
       showRight:Boolean,
       tableData:Array,
       rollbackFn:Function,
       reflushTable:Function,
       orderStatus:Number,
       shopId:String,
       orderId:String,
       choose:Boolean,
       orderDetail:Object,
       scene:String  //场景，有详情界面，有新增界面，需要给那些场景配置那些界面数据，因此需要给定场景进行判断

    },
  components:{
    PrintWashCode,
    PrintWashCodeTree
  },
  name: "TableTongji",

  data() {
    return {
      printType:"zjCode",//washCode zjCode//质检打印和水洗唛打印，两个打印首先是他们的打印规格和打印出厂方式不同，避免数据污染
      tongji:{},
      customerDetail:{},
      dialogVisible:false,
      itemObj:{},
      loading:false,
      multipleSelection:[
        {
          type:0, //type为0 是配饰，1是商品
          selfOperated:0,
          srgCode:"",
          index:"",
          washCode:"",
          accessorVoList:[], //配饰
          remarks:[]
        }
      ],
      detail:{},
      
      // 商品标准结构
      // {"id":"202508042000632981","shopId":"202411109960001649","itemType":null,"srgId":"202409281805786985","srgCode":"3-2-1","washCode":"250804cq82453","washShop":null,"orderNumber":"O20250803cq0106782","orderId":"202508031237846174","washType":"普洗",
      // "picture":"public/img/2025-08-04/3d8fe8e3-47f5-4d31-a2a6-bd876877a0d8.png,public/img/2025-08-04/c02e3e0b-3840-42a5-9234-cc1699d28d3d.png,public/img/2025-08-04/fbeee308-285d-4c8b-a908-62772c632a01.png,public/img/2025-08-04/1eccd501-05ca-4c16-b542-cdd1f26b0427.png,public/img/2025-08-04/6d9e311e-e56e-4325-8d08-229deb21318b.png,
      // public/img/2025-08-04/9ccd6828-20a3-4098-bb40-c045c40b10ce.png","carouselPicture":null,"phone":"19112975293","status":2,"remark":null,"storageTime":"2025-08-04 20:21:13","storageUser":"108","storageUserName":"tongyaoxinxi","finishTime":null,"extendInfo":null,"createBy":"刷鞋匠 成都","createTime":"2025-08-04 20:21:13",
      // "updateBy":"刷鞋匠 成都","updateTime":"2025-08-05 01:00:01","startTime":null,"endTime":null,"washFactory":null,"qualityInspectionTime":null,"qualityInspector":null,"qualityInspectorStatus":null,"accessorVoList":null}

        //  tableData:[
        //   // {code:123,goodsType:"请选择商品类型",shuixima:"455",photo:[1,2,3],peishi:"5455",remark:"155,65,6",status:"待出库"}
        // ],
      
    };
  },
  created() {
    // console.info(this.tableData)
    // console.info(this.orderDetail)
    // console.info(this.tableData)
    // console.info("订单编号",this.orderId)
    if(this.orderId){
     this.getTongji()
    }
 
  },

  watch:{
    tableData(newData,oldData){
        this.tableData=newData
        // console.info("table数据变更了",this.orderId)
        this.getTongji()
        // console.info(newData)
        // console.info("数据监听到改变了")
    },
    orderId(newData,oldData){
     this.getTongji()

    },

  },

  methods: {

    handleClose(){
      this.dialogVisible=false
    },

    deleteGoodsFn(item){
      this.dialogVisible=true
      this.itemObj=item
    },

    handleSelectionChange(val){
      this.$emit('updateSelectedFn',val)
    },
    printZjCode(item){
      if(item.accessorVoList){
        let arr=item.accessorVoList.filter(res=>res.status==0)
        if(item.status==0){
           arr.push(item)
        }

        if(arr.length>0){ 
          this.$emit('zjTipMsg')
          return
        }
      }
      this.printType="zjCode"
      this.multipleSelection=[]
      this.customerDetail=this.orderDetail
       let date = new Date(this.customerDetail.createTime);   
       let month = date.getMonth() + 1; // 月份从0开始，所以加1
       let day = date.getDate(); // 直接获取日期
      //  console.log(`Month: ${month}, Day: ${day}`); // 输出例如：Month: 4, Day: 15（如果是4月15日）
       month=month<10? "0"+month:month
       day=day<10? "0"+day:day
      this.customerDetail.date=month+"\n"+day
      // console.info(this.customerDetail)
      item.type=1
      item.selfOperated=this.orderDetail.selfOperated
      this.multipleSelection.push(item)
      // console.info(this.multipleSelection)
      // console.info("打印质检码",this.multipleSelection)
      this.$refs.PrintWashCodeTreeBtn.$refs.printBtn.click();
      //  this.$emit('zjTipMsg')
    },

    


    //打印全部水洗唛
    printAllWashCode(){
      // if(this.orderStatus<3 ){
      //   this.$message.error("请先入库在打印")
      //   return
      // }
      this.printType="washCode"
        this.customerDetail=this.orderDetail
        this.multipleSelection=[]
        this.tableData.forEach(res=>{
          res.type=1
          res.srgCode=this.tongji.code
          res.selfOperated=this.orderDetail.selfOperated
          this.multipleSelection.push(res)
       })
       this.$refs.printWashCodeBtn.$refs.printWashCodeBtn.click();
    },



    //打印全部配置水洗唛 
    printAllPeiShiWashCode(){
      //  if(this.orderStatus<3 ){
      //   this.$message.error("请先入库在打印")
      //   return
      // }
      this.printType="washCode"
      this.customerDetail=this.orderDetail
      this.multipleSelection=[]
       this.tableData.forEach(res=>{
        //  console.info(res)
          if(res.accessorVoList){
            res.accessorVoList.forEach(element => {
             this.multipleSelection.push({
             washCode:element.washCode,
             index:res.index,
             selfOperated:this.orderDetail.selfOperated,
             srgCode:this.tongji.code,
             type:0,
             typeName:element.type
          })
        });
         }
      })
      // console.info("配饰",this.multipleSelection)

   this.$refs.printWashCodeBtn.$refs.printWashCodeBtn.click();
    },
   
    printWashCodeForPeiShi(item){
      //  if(this.orderStatus<3 ){
      //   this.$message.error("请先入库在打印")
      //   return
      // }
      this.printType="washCode"
       this.customerDetail=this.orderDetail
        this.multipleSelection=[]
        item.accessorVoList.forEach(element => {
          this.multipleSelection.push({
             washCode:element.washCode,
             index:item.index,
             srgCode: this.tongji.code,
             type:0,
             typeName:element.type,
             selfOperated:this.orderDetail.selfOperated,
          })
        });
        this.$refs.printWashCodeBtn.$refs.printWashCodeBtn.click();


    },

    printWashCodeForTongji(item) {
      //  if(this.orderStatus<3 ){
      //   this.$message.error("请先入库在打印")
      //   return
      // }
      this.printType="washCode"
      // debugger
      this.multipleSelection=[]
      this.customerDetail=this.orderDetail
      // console.info("cu",this.customerDetail)
      // console.info("获取到的水洗吗",item)
      item.type=1
      item.selfOperated=this.orderDetail.selfOperated
      item.srgCode=this.tongji.code
      this.multipleSelection.push(item)
      // console.info(this.multipleSelection)

      this.$nextTick(() => {
          this.$refs.printWashCodeBtn.$refs.printWashCodeBtn.click();
        });
      
    },

    getTongji(){

        orderStatis({orderId:this.orderId}).then(res=>{
          this.tongji=res.data
        })

    },

 
    deleteGoods(){
      let item=this.itemObj
      let that=this
      item.shoeId=this.itemObj.id
      that.loading=true
      removeShoe(item).then(res=>{
          that.$emit('close-ywyj-event')
          that.$message.success("删除成功")
          that.dialogVisible=false
          that.loading=false
      })
      

    },
    
    clickRollBack(item){
     if(this.rollbackFn){
         this.rollbackFn(item)
      }
    },

    handleRowClick(row, column, cell, event){
      if(this.scene == 'ywyj' && (this.orderStatus == 2 || this.orderStatus == 1) ){
        // 检查是否是特定的列，例如 column.label === '姓名'
          if (column.label === '图片' || column.label === '操作') {
            // 执行你的操作
            // console.log('姓名列被点击');
          } else {
            this.clickRollBack(row)
            // 对于其他列不做任何操作或执行其他操作
          }

      }
   
  
    },

    addGoods(){
       getWashCode({shopId:this.shopId,orderId:this.orderId}).then(res=>{
        let obj={itemType:"请选择物品类型",... res.data,picture:res.data.picture? res.data.picture:[],orderId:this.orderId,shopId:this.shopId}
         obj.id=obj.shoeId
         obj.washType=this.orderDetail.orderGoodPoList[0].washType
        //  console.info("添加商品得obj对象",obj)
          this.tableData.push(obj)
       })
       
    },
      dayin(){},
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
    }

  }
};
</script>

<style scoped lang="scss">

::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    background-color: white !important;;
}

::v-deep .el-table__body-wrapper{
      background-color: #f8f8f9 !important;;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell{
    text-align: center;
}

.ywyj_tongji_title{
    line-height: 40px;
    padding-left: 40px;
    width: 50vh;
    min-width: 600px;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    background-color: #f8f8f9 !important;;

    
}
.ywyj_tongji_title_item{
    margin-left: 5px;
}
.ywyj_tongji_title_item_data{
    font-size: 25px;
    font-weight: 700;
}


.defaultbgColor{
    line-height: 30px;
    text-align: center;
    margin-top: 10px;
    background-color: #f8f8f9;
}

.defaultbgColor:hover{
    cursor: pointer;
}

.image-box {
  // width: 220px;
  display: flex;
  flex-wrap: wrap;
  .image-item {
    position: relative;
    flex: 0 0 50px;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .el-icon-error {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      background-color: #ffffff;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
.tag-container{
  position: relative;
  padding-top: 10px;
  padding-left: 10px;
}

.tag-container1{
  position: relative;
  padding-top: 13px;
  padding-left: 10px;
}


.tag-container1 .el-tag {
  
  // height: 60px;
  // width: px;
  position: relative;
  min-width: 140px;
  display: flex;
  margin-bottom: 10px;

}

.tag-container .el-tag {
  
  height: 60px;
  // width: px;
  min-width: 140px;
  display: flex;
  margin-bottom: 10px;

}
.vertical-content {
  display: flex;
  text-align: left;
  margin-top: 5px;
  flex-direction: column; /* 垂直排列 */
  // align-items: center; /* 如果需要，可以进一步调整内容的对齐方式 */
}
.tipImage{
  left: 0;
  z-index: 999;
  top: 0px;
  position: absolute;
}

</style>
